<script setup>
import {computed, reactive, ref, toRefs} from "vue";
const emit = defineEmits(['next'])
const props = defineProps({
  form:Object
})
const {form} = toRefs(props)
const rules = ref({
  REPORT_RECEIVE_TYPE:[{required:true, message:'报告领取方式不能为空'}]
})

const reportReceiveType = computed(() => {
  return  form.value.REPORT_RECEIVE_TYPE ? form.value.REPORT_RECEIVE_TYPE.split(',') : []
})

const otherRules = computed(()=>{
  let otherRule = {
    receiveMail:{},
    mailAddress:{}
  }
  if (form.value.REPORT_RECEIVE_TYPE && form.value.REPORT_RECEIVE_TYPE.indexOf('电子报告') > -1){
    otherRule.receiveMail = {required: true, message: '电子邮箱必填'}
  }
  if (form.value.REPORT_RECEIVE_TYPE && form.value.REPORT_RECEIVE_TYPE.indexOf('邮寄') > -1){
    otherRule.mailAddress = {required: true, message: '邮寄信息地址必填'}
  }
  return otherRule
})
const onReceiveTypeChange = (val) =>{
  console.log('check receive type is ::', val)
  form.value.REPORT_RECEIVE_TYPE = val.join(',')
}
const formInfo = ref()

defineExpose({
  formInfo
})
</script>

<template>
  <el-form label-width="120px" ref="formInfo" :model="form" :rules="rules">
    <el-form-item label="报告领取方式" prop="REPORT_RECEIVE_TYPE">
      <el-checkbox-group v-model="reportReceiveType" @change="onReceiveTypeChange" disabled>
        <el-checkbox label="自取"></el-checkbox>
        <el-checkbox label="邮寄"></el-checkbox>
        <el-checkbox label="电子报告"></el-checkbox>
      </el-checkbox-group>
      <div>
        <span>（说明：纸质检验报告一式两份，<b>如需增加，按20元/份额外收取费用</b>）</span>
      </div>
    </el-form-item>
    <el-form-item label="报告接受邮箱" prop="" :rules="otherRules.receiveMail">
      <el-input v-model="form.REPORT_RECEIVE_EMAIL" prop="REPORT_RECEIVE_EMAIL"></el-input>
    </el-form-item>
    <el-form-item label="其他业务备注" prop="MEMO">
      <el-input v-model="form.MEMO" prop="MEMO"></el-input>
    </el-form-item>
    <el-form-item label="邮寄信息" prop="MAIL_ADDRESS_INFO">
      <el-input v-model="form.MAIL_ADDRESS_INFO" type="textarea"></el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>